import  React, { Component }  from 'react';
import { Form, Input, Select, Row, Col, Button } from 'antd';
import styles from './Login.less';
import './forgetPassword.css';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

// 忘记密码页面
const FormItem = Form.Item;

@connect()
@Form.create()
export default class ForgrtPasswordPage extends Component {

    handleSubmit() {

    }

    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        console.log(value);
        if(value && 6 <= value.length <= 16) {
            callback();
        } else {
            callback('请输入字母、数字和符号组合的密码，6-16位');
        }
    }

    // 确认密码
    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次密码输入不一致');
        } else {
          callback();
        }
    }

    toLogin = () => {
        const { dispatch } = this.props;
        dispatch(routerRedux.push({ 
            pathname: '/user/login'
        }));
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className={styles.main}>
                <div className={styles.loginName}>重置密码</div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        <Select 
                            size="large" 
                            classname={styles.select} 
                            name="roleCode" 
                            style={{ height: 40}} 
                            placeholder="请选择一个角色"
                            defaultValue="1"
                            >
                            <Select.Option value="1">管理后台</Select.Option>
                            <Select.Option value="3">子公司后台</Select.Option>
                            <Select.Option value="7">合作伙伴后台</Select.Option>
                            <Select.Option value="9">渠道商后台</Select.Option>
                            <Select.Option value="8">业务员后台</Select.Option>
                            <Select.Option value="2">供应商后台</Select.Option>
                            <Select.Option value="4">采购商后台</Select.Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                    {getFieldDecorator('telphone', {
                        rules: [{
                        required: true, message: '请输入账号',
                        }],
                    })(
                        <Input type="text" placeholder="请输入账号"/>
                    )}
                    </FormItem>
                    <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{
                        required: true, message: '',
                        }, {
                            validator: this.validateToNextPassword,
                        }],
                    })(
                        <Input type="password" placeholder="请输入字母、数字和符号组合的密码，6-16位"/>
                    )}
                    </FormItem>
                    <FormItem>
                    {getFieldDecorator('confirmPassword', {
                        rules: [{
                        required: true, message: '请确认密码',
                        }, {
                            validator: this.compareToFirstPassword,
                        }],
                    })(
                        <Input type="password" placeholder="请再次输入密码"/>
                    )}
                    </FormItem>
                    <FormItem>
                        <Row gutter={8}>
                            <Col span={16}>
                            {getFieldDecorator('msgCode', {
                                rules: [{ required: true, message: '请输入验证码' }],
                            })(
                                <Input placeholder="请输入验证码"/>
                            )}
                            </Col>
                            <Col span={8}>
                            <Button type="primary">获取验证码</Button>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" block size="large">确认</Button>
                    </FormItem>
                </Form>
                <div>
                    <a onClick={this.toLogin}>直接登录</a>
                </div>
            </div>
        );
    }
}